<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贵州大学实习报告</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html, body{
            width: 100%;
            height: 100%;
        }
        .report-container{
            height: 100%;
            background: #f2f2f2;
        }
        .wrapper-content{
            background: #fff;
            text-align: center;
        }
        .wrapper-content .page{
            margin: 10% auto;
        }
        .title{
            font-weight: 700;
            font-size: 30px;
            font-family: SimSun, fangzhengcuqian, serif;
            letter-spacing: 10px;
        }
        .start-info{
            display: flex;
            justify-content: center;
            margin-top: 20%;
        }
        .start-info .item{
            display: flex;
            justify-content: flex-start;
            width: fit-content;
            font-weight: 700;
            font-family: SimSun, fangzhengcuqian, serif;
            font-size: 24px;
            margin-bottom: 10%;
        }
        .start-info .item .label{
            width: 130px;
        }
        .start-info .item .label .hidden-text{
            opacity: 0;
        }
        .start-info .item .underline{
            width: 280px;
            border-bottom: 2px solid #000;
        }
        .train-center{
            margin-top: 10%;
            font-weight: 700;
            text-align: center;
            font-size: 24px;
            margin-bottom: 20%;
        }
        .catalogue-page{
            width: 60%;
            margin: 0 auto;
        }
        .catalogue{
            padding-top: 20%;
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 20%;
        }
        .part{
            display: flex;
            justify-content: flex-start;
            margin-bottom: 10%;
            font-weight: 700;
        }
        .page-break-after{
            page-break-after: always;
        }
        .left{
            margin-right: 20px;
        }
        .table{
            display: flex;
            justify-content: center;
        }
        table{
            width: 100%;
            margin-top: 40px;
            border: 1px solid #000;
            border-collapse: collapse;
        }
        table td{
            border: 1px solid #000;
            padding: 10px;
        }
        table tr .item{
            width: 120px;
            font-weight: 700;
        }
        table tr .level{
            color: #f40;
            width: calc(100% - 120px);
        }
        table tr .comment{
            width: calc(100% - 120px);
        }
        .part-title{
            margin-top: 60px;
            font-weight: 700;
            font-size: 24px;
            display: flex;
            justify-content: center;
        }
        .question{
            margin-top: 20px;
            font-weight: 700;
            text-align: left;
        }
        .answer{
            margin-top: 20px;
            text-indent: 2em;
            text-align: left;
        }
        .answer img{
            max-width: 1000px;
        }
    </style>
</head>
<body>
<div class="report-container">
    <div class="wrapper-content">
        <div class="page">
            <img class="logo-img" src="http://192.168.1.20:3000/logo-img.jpg" alt="">
            <div class="title"><%= reportName %></div>
            <div class="start-info">
                <div class="start-info-item">
                    <div class="item">
                        <div class="label">课程名称：</div>
                        <div class="underline"><%= report4.courseName %></div>
                    </div>
                    <div class="item">
                        <div class="label">开课学期：</div>
                        <div class="underline"><%= report4.semesterName %></div>
                    </div>
                    <div class="item">
                        <div class="label">姓<span class="hidden-text">透明</span>名：</div>
                        <div class="underline"><%= name %></div>
                    </div>
                    <div class="item">
                        <div class="label">学<span class="hidden-text">透明</span>号：</div>
                        <div class="underline"><%= number %></div>
                    </div>
                    <div class="item">
                        <div class="label">班<span class="hidden-text">透明</span>级：</div>
                        <div class="underline"><%= report4.className %></div>
                    </div>
                    <div class="item">
                        <div class="label">指导老师：</div>
                        <div class="underline"><%= teacherName %></div>
                    </div>
                </div>
            </div>
            <div class="train-center">工程训练教研室</div>
        </div>
        <div class="page-break-after"></div>
        <div class="catalogue-page">
            <div class="catalogue">目录</div>
            <% for (let i = 0; i < report4.titles.length; i++) { %>
                <div class="part">
                    <div class="left"><%= report4.titles[i].title %></div>
                    <div class="right"></div>
                </div>
            <% } %>
            <div class="page-break-after"></div>
        </div>
        <div class="table">
            <table>
                <tr>
                    <td class="item">报告等级</td>
                    <td class="level"><%= scoreDesc %></td>
                </tr>
                <tr>
                    <td class="item">报告评语</td>
                    <td class="comment"><%=  report4.comment %></td>
                </tr>
            </table>
        </div>
        <% for (let i = 0; i < report4.titles.length; i++) { %>
        <div class="page-break-after"></div>
            <div class="part-title"><%= report4.titles[i].title %></div>
            <% for (let j = 0; j < report4.titles[i].subjects.length; j++) {%>
                <div class="question"><%= report4.titles[i].subjects[j].subject %></div>
                <div class="answer"><%- report4.titles[i].subjects[j].answer %></div>
            <% } %>
        <% } %>
    </div>
</div>
</body>
</html>
